<template>
    <div class="checkout-checkout-address_form" ontouchstart="" onmouseover="">
        <div class="layui-layer-title" style="cursor: move;" >添加新地址</div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" v-on:click="go_back()"></a></span>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <form id="address-form" class="form-horizontal mt-1 mb-1">
                    <fieldset>
                        <!-- fullname -->
                        <div class="form-group required">
                            <label class="col-sm-2 control-label" for="input-fullname">您的姓名</label>
                            <div class="col-sm-10">
                                <input v-model='info.name' type="text" name="fullname" value="" placeholder="您的姓名*" id="input-fullname" class="form-control">
                            </div>
                        </div>

                        <!-- telephone -->
                        <div class="form-group required">
                            <label class="col-sm-2 control-label" for="input-telephone">联系电话</label>
                            <div class="col-sm-10">
                                <input v-model='info.telephone' type="text" name="telephone" value="" placeholder="联系电话*" id="input-telephone" class="form-control">
                            </div>
                        </div>

                        <!-- company -->
                        <!--
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-company">公司名称</label>
                            <div class="col-sm-10">
                                <input type="text" name="company" value="" placeholder="公司名称" id="input-company" class="form-control">
                            </div>
                        </div>
                        -->

                        <!-- City -->

                        <!-- Location -->
                        <div class="form-group required">
                            <label class="col-sm-2 control-label" for="input-zone">区域</label>
                            <div class="col-sm-10">
                                <div class="row">

                                    <div class="col-sm-3 hidden">
                                        <select name="country_id" id="input-country" class="form-control">
                                            <option value=""> --- 请选择 --- </option>
                                            <option value="44" selected="selected">中国</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-3">
                                        <select name="zone_id" v-model="info.province_id" id="input-zone" class="form-control">
                                            <option value="0" > --- 请选择 --- </option>
                                            <option v-for="zone in zones" v-bind:value="zone.zone_id" >{{zone.name}}</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-3">
                                        <select name="city_id" v-model="info.city_id" id="input-city" class="form-control">
                                            <option value="0"> --- 请选择 --- </option>
                                            <option v-for="city in cities" v-bind:value="city.city_id" >{{city.name}}</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-3">
                                        <select name="county_id" v-model="info.area_id"  id="input-county" class="form-control">
                                            <option value="0"> --- 请选择 --- </option>
                                            <option v-for="district in districts" v-bind:value="district.city_id"> {{district.name}} </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Address 1 -->
                        <div class="form-group required">
                            <label class="col-sm-2 control-label" for="input-address-1">详细地址</label>
                            <div class="col-sm-10">
                                <input v-model='info.detail_address' type="text" name="address_1" value="" placeholder="详细地址*" id="input-address-1" class="form-control">
                            </div>
                        </div>

                        <!-- Address 2 -->
                        <div class="form-group hidden">
                            <label class="col-sm-2 control-label" for="input-address-2">详细地址2</label>
                            <div class="col-sm-10">
                                <input type="text" name="address_2" value="" placeholder="详细地址2" id="input-address-2" class="form-control">
                            </div>
                        </div>

                        <!-- Postcode -->
                        <!--
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-postcode">邮政编码</label>
                            <div class="col-sm-10">
                                <input type="text" name="postcode" value="123123" placeholder="邮政编码*" id="input-postcode" class="form-control">
                            </div>
                        </div>
                        -->

                        <div class="form-group">
                            <label class="col-sm-2 control-label">默认地址</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="default" v-model="info.is_default" value="1">
                                    是
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="default" v-model="info.is_default" value="0" checked="checked">
                                    否
                                </label>
                            </div>
                        </div>
                        <button id="button-submit"
                                v-on:click='do_edit()'
                                type="button" data-loading-text="正在加载..."
                                class="btn btn-primary btn-block">提交</button>
                        <button id="button-delete"
                                v-on:click='do_delete()'
                                type="button"
                                style="margin-top:20px"
                                class="btn btn-error btn-block">删除</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    </div>
</template>

<script>
    export default {
        name: "address-edit",
        data:function(){
            return {
                id:'',
                zones:[],  // 省
                cities:[], // 市
                districts:[], // 区/县
                info:{
                    name:'',
                    telephone:'',
                    province_id:'',
                    province_name:'',
                    city_id:'',
                    city_name:'',
                    area_id:'',
                    area_name:'',
                    detail_address:'',
                    is_default:0,

                }
            }
        },

        methods:{

            do_edit:function(){
                var t = this;
                var url = this.config.app_url + '&r=address.edit';
                if( this.id ){
                    url += '&id=' + this.id;
                }

                this.info.name = this.info.name.replace(/^(\s+)|(\s+)$/,'');
                this.info.telephone = this.info.telephone.replace(/^(\s+)|(\s+)$/,'');

                if( !this.info.name ){
                    alert('请填写名字');
                    return;
                }
                if( !this.info.telephone ){
                    alert('请填写电话');
                    return;
                }
                if( !/^1[\d]{10}$/.test(this.info.telephone)){
                    alert('电话格式填写不正确');
                    return;
                }
                if( !this.info.detail_address ){
                    alert('请填写详细地址');
                    return;
                }
                this.info.province_name = $('#input-zone option:selected').html();
                this.info.city_name = $('#input-city option:selected').html();
                this.info.area_name = $('#input-county option:selected').html();

                var data = '';
                for(var p in this.info ){
                    data += p + '='+this.info[p] + '&';
                }

                this.axios.post(url, data).then(function( res ){
                    // t.$router.push('/address');
                    t.$router.go(-1);
                });
            },

            do_delete:function(){
                var t = this;
                var url = this.config.app_url + '&r=address.remove';
                if( this.id ){
                    url += '&address_id=' + this.id;
                }

                var data = {};

                this.axios.post(url, data).then(function( res ){
                    t.$router.go(-1);
                });
            },

            getAddressBYID:function(){

                var t = this;
                var url = this.config.app_url + '&r=address.single';
                url += '&id=' + this.id;
                this.axios.get( url ,{}).then(function( res ){
                    t.info = res.data;
                    //todo 根据 信息获取地址

                });


            },

            getZone:function(){
                var url =  this.config.app_url + '&r=zone';
                var t = this;
                this.axios.get( url ,{}).then(function( res ){
                    t.zones = res.data;
                });
            },

            //根据 省份id,获取城市列表
            getCities:function(){
                if( !this.info.province_id ){
                    this.zones = [];
                }else{
                    // this.info.province_name = $('#input-zone option:selected').html();
                    var url =  this.config.app_url + '&r=zone.city';
                    url += "&province_id=" + this.info.province_id;
                    var t = this;
                    this.axios.get( url ,{}).then(function( res ){
                        t.cities = res.data;
                    });
                }

            },

            // 根据 城市id, 获取 区县列表
            getDistricts:function(){

                if( !this.info.city_id ){
                    this.cities = [];
                }else{
                    // this.info.city_name = $('#input-city option:selected').html();
                    var url =  this.config.app_url + '&r=zone.district';
                    url += "&city_id=" + this.info.city_id;
                    var t = this;
                    this.axios.get( url ,{}).then(function( res ){
                        t.districts = res.data;
                    });
                }

            },

            go_back:function(){

                this.$router.go(-1);
            }

        },

        watch:{

            "info.province_id":function( a, b ){

                this.getCities(  );

            },

            "info.city_id":function(){
                this.getDistricts(  );
            },

            "info.area_id":function(){
                // this.info.area_name = $('#input-county option:selected').html();
            },
        },

        created:function(){

            var params = this.$route.params;
            if( params.address_id ){
                this.id = params.address_id ? params.address_id : '';
                this.getAddressBYID();
            }

            this.getZone();

        },



    }
</script>

<style scoped>

</style>